<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
			<link rel="stylesheet" type="text/css" href="../sass/cart.css"/>
			<script type="text/javascript" src="../js/jquery/jquery-1.11.3.js" ></script>
			<script src="../js/jquery/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
			<script src="../js/cookie.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<!----------------------------------------------leader----------------------------------------->
		<div class="leader">
			<a href="##"></a>
		</div>
<!----------------------------------------------top----------------------------------------->
		<div class="top">
			<div class="top-top">
				<div class= "wrap">
					<div class="top-left left">
					<span class= "top-home"></span><a href= "##">第五大道首页</a>|<span class= "top-phone"></span><a>贵宾专线：4008-6767-38</a>
				    </div>
				    <div class="top-right right">
					<ul>
						<li><a href= "##">登录</a></li>
						<li><span class= "regist"></span><a href= "##">注册</a></li>
						<li class="top-myfifth">
							<a href= "##">我的第五大道 </a><span class= "myfifth-span"></span>
							<div class="myfifth">
								<p><a href="##">我的订单</a></p>
								<p><a href="##">我的收藏</a></p>
								<p><a href="##">已购商品</a></p>
								<p><a href="##">我的礼券</a></p>
								<p><a href="##">我的积分</a></p>
							</div>
						</li>
						<li><a href= "##">帮助中心</a></li>
						<li><a href= "##" class= "phone-download">手机版下载</a><span></span></li>
					</ul>
				    </div>
				</div>
			</div>		
			<div class="wrap">				
				<div class="top-bottom">
					<a href= "../index.html"><img src="../img/logo.jpg"/></a>
					<a href="##"><img class= "yijian" src="../img/yijian.jpg"/></a>
					<div class="search">
						<input type= "text" class= "inp" placeholder="  唇部彩妆"/>
						<button>搜   索</button>
						<ul>
							<li><a href= "##">太阳镜</a></li>
							<li><a href= "##">美妆</a></li>
							<li><a href= "##">运动户外</a></li>
							<li><a href= "##">箱包</a></li>
							<li><a href= "##">配饰</a></li>
							<li><a href= "##">腕表</a></li>
						</ul>
					</div>
					<div class="top-bottom-right ">
						<img class= "v30cart" src="../img/v30cart.png" />购物袋（
						<span class="cart-num">0</span>
						）
						<span class= "right-jiantou"></span>
					</div>
				</div>
			</div>	
			
		</div>
<!----------------------------------------------banner----------------------------------------->
			<div class="banner-top">
				<div class="wrap">
					<ul class= "banner-list">
						<li><a  class= "active"href="##">商品分类</a></li>
						<li><a href="##">品牌</a></li>
						<li><a href="##">最新</a></li>
						<li><a href="##">女士</a></li>
						<li><a href="##">男士</a></li>
						<li><a href="##">商品分类</a></li>
						<li><a href="##">商品分类</a></li>
						<li><a href="##">商品分类</a></li>
						<li><a href="##">特惠</a></li>
						<li><a href="##">礼品区</a></li>
						<li><a href="##">到店</a></li>	
					</ul>
				</div>
			</div>		
<!----------------------------------------------main----------------------------------------->
			<div class="main">
				<div class="wrap">
					<div class="cartList">
						<ul class="cartHead">
							<li>缩略图</li>
							<li>品名</li>
							<li>单价</li>
							<li>数量</li>
							<li>小计</li>
							<li>操作</li>
						</ul>
						
						<div class="blank">
							您的购物车是空的赶快购买商品吧。
							<p>去看看大家都喜欢的<a href ="goodlist.html" class = "fontColor">最热商品</a></p>
						</div>
						
					</div>
					<div id="main-bottom">
						
					</div>
					<div class="last-step">
							去结算
					</div>
					<div class="last-step">
							总价：￥<span id= "total"></span>
					</div>
					
				</div>
			</div>
		
		<script type="text/javascript">
			$(function(){
				console.log(1)
				var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
				if(!cartStr){
					$(".cartHead").hide();
					$(".blank").show();
				}else {
					var cartObj = convertCartStrToObj(cartStr);
					for(var id in cartObj) {
						var good = cartObj[id];
						var str = '<ul class="goodInfo" data-good-id="' + id + '">' +
							'<li><img src="' + good.src + '" /></li>' +
							'<li>' + good.name + '</li>' +
							'<li>' + good.price + '</li>' +
							'<li class="num">' +
							'<a href="javascript:;" class="minus">-</a>' +
							' <input type="text" value="' + good.num + '" />  ' +
							'<a href="javascript:;" class="plus">+</a>' +
							'</li>' +
							'<li class="total">' + good.num * good.price + '</li>' +
							'<li><a href="javascript:;" class="del">删除</a></li>' +
							'</ul>';
						$(str).appendTo(".cartList");
						
					}
					//计算总价
		    function pic(){		    	
		    		var price = 0
				  for(id in cartObj) {
				  	good = cartObj[id];
				  	price += good.num * good.price
			       }
				  // console.log(price)
					$("#total").html(price)
		    	
				 
			}
		    function convertStrToObj(str){
				if(!str){
					return {}
				}
				var users = str.split(":")
				var obj = {}
				for(var i = 0 ; i < users.length; i++){
					var userData = users[i].split(",")
					obj[userData[0]] = userData[1]
				}
				return obj
			}
            pic()
            //计算数量
           function num(){
			   var n=0;
			for(var i=0;i<$(".goodInfo").length;i++){
				var b=$(".goodInfo").eq(i).find("input").val();			
				    n+=parseInt(b);
			}
			console.log(n)
			$(".cart-num").html( n ); 
			var nn =  String(n);
			console.log(nn)
			$.cookie('num',  nn , {
							expires: 7,
							path: "/"
						});
			
		}
		num()
					
					
					$('.goodInfo a.del').click(function() {
						var id = $(this).parents('.goodInfo').remove().attr("data-good-id");
						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);

						delete cartObj[id];
						$.cookie('cart', convertObjToCartStr(cartObj), {
							expires: 7,
							path: "/"
						});
						var price = 0
				  		for(id in cartObj) {
				  			good = cartObj[id];
				  			price += good.num * good.price
			       		}
				 		 // console.log(price)
						$("#total").html(price)
						num();
					})

					$(".goodInfo a.plus").click(function() {

						var id = $(this).parents('.goodInfo').attr("data-good-id");

						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);
						cartObj[id].num += 1;
						$(this).siblings("input").val("" + cartObj[id].num);
						$(this).parent().siblings('.total').html(cartObj[id].num * cartObj[id].price + "");
						$.cookie('cart', convertObjToCartStr(cartObj), {
							expires: 7,
							path: "/"
						});
						var price = 0
				  		for(id in cartObj) {
				  			good = cartObj[id];
				  			price += good.num * good.price
			       		}
				 		 // console.log(price)
						$("#total").html(price)
						num();
					});
					$(".goodInfo a.minus").click(function(){
						var id = $(this).parents('.goodInfo').attr("data-good-id");
						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);
						if(cartObj[id].num > 1){ 
							cartObj[id].num -= 1;
							$(this).siblings("input").val("" + cartObj[id].num);
							$(this).parent().siblings('.total').html(cartObj[id].num * cartObj[id].price + "");
							$.cookie('cart', convertObjToCartStr(cartObj), {
								expires: 7,
								path: "/"
							});
						}
					   var price = 0
				  		for(id in cartObj) {
				  			good = cartObj[id];
				  			price += good.num * good.price
			       		}
				 		 // console.log(price)
						$("#total").html(price)
						num();
					
					});
					
					$(".goodInfo li.num input").blur(function(){
						var id = $(this).parents('.goodInfo').attr("data-good-id");
						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);
						var pattern = /^\d+$/;
						if(!pattern.test($(this).val())){
							cartObj[id].num = 1;
							$(this).val("1");
						}else{
						cartObj[id].num = parseInt($(this).val());
						}
						
						
							$(this).siblings("input").val("" + cartObj[id].num);
							$(this).parent().siblings('.total').html(cartObj[id].num * cartObj[id].price + "");
							$.cookie('cart', convertObjToCartStr(cartObj), {
								expires: 7,
								path: "/"
							});
							pic();
						num();
					})
					
			}
				//显示用户登录状态
					 $person = $(".top-right a")
				    console.log($person.eq(0).html())
				    var users = getCookie("txt") ? getCookie("txt") : "";
				    console.log(users);
				    if(users){
				    	$person.eq(0).html("欢迎"+users+"用户")
				    	$person.eq(0).attr("href","##")
				    	$person.eq(1).html("退出")
				    	$person.eq(1).attr("href","##")
				    	$person.eq(1).click(function(){
				    		removeCookie("txt");
				    		location.href="../index.html"
				    	})
				    }else{
				    	$person.eq(0).html("登录")
				    	$person.eq(0).attr("href","enter.html")
				    	$person.eq(1).html("注册")
				    	$person.eq(1).attr("href","register.html")
				    }

			});

			function convertCartStrToObj(cartStr) {
				if(!cartStr) {
					return {};
				}
				var goods = cartStr.split(":");
				var obj = {};
				for(var i = 0; i < goods.length; i++) {
					var data = goods[i].split(",");
					obj[data[0]] = {
						name: data[1],
						price: parseFloat(data[2]),
						num: parseInt(data[3]),
						src: data[4]
					}
				}
				return obj;
			}

			function convertObjToCartStr(obj) {
				
				var cartStr = "";
				for(var id in obj) {
					if(cartStr) {
						cartStr += ":";
					}
					cartStr += id + "," + obj[id].name + "," + obj[id].price + "," + obj[id].num + "," + obj[id].src;
				}
				return cartStr;
			}
				
			
		</script>	

			
			
<!----------------------------------------------bottom----------------------------------------->
		<div class="bottom">
			<div class="wrap">
				<div class="bottom-top">
					<ul>
						<li>
							<img src="../img/footer_message01.jpg" />
							<div class="_message01">
								<h4>正品保障</h4>
								<p><a href= "##">品牌授权，官方验真</a></p>
							</div>
						</li>
						<li>
							<img src="../img/footer_message02.jpg" />
							<div class="_message01">
								<h4>正品保障</h4>
								<p><a href= "##">品牌授权，官方验真</a></p>
							</div>
						</li>
						<li>
							<img src="../img/footer_message03.jpg" />
							<div class="_message01">
								<h4>正品保障</h4>
								<p><a href= "##">品牌授权，官方验真</a></p>
							</div>
						</li>
						<li>
							<img src="../img/footer_message04.jpg" />
							<div class="_message01">
								<h4>正品保障</h4>
								<p><a href= "##">品牌授权，官方验真</a></p>
							</div>
						</li>
						<li>
							<img src="../img/footer_message05.jpg" />
							<div class="_message01">
								<h4>正品保障</h4>
								<p><a href= "##">品牌授权，官方验真</a></p>
							</div>
						</li>
					</ul>
				</div>
				<div class="bottom-list">
					<ul>
						<li>
							<h5>服务保障</h5>
							<span><a href="##">品牌授权正品</a></span>
							<span><a href="##">品牌客服</a></span>
							<span><a href="##">预约到店体验</a></span>
							<span><a href="##">7天无理由退换</a></span>
						</li>
						<li>
							<h5>服务保障</h5>
							<span><a href="##">品牌授权正品</a></span>
							<span><a href="##">品牌客服</a></span>
							<span><a href="##">预约到店体验</a></span>
							<span><a href="##">7天无理由退换</a></span>
						</li>
						<li>
							<h5>服务保障</h5>
							<span><a href="##">品牌授权正品</a></span>
							<span><a href="##">品牌客服</a></span>
							<span><a href="##">预约到店体验</a></span>
							<span><a href="##">7天无理由退换</a></span>
						</li>
						<li>
							<h5>服务保障</h5>
							<span><a href="##">品牌授权正品</a></span>
							<span><a href="##">品牌客服</a></span>
							<span><a href="##">预约到店体验</a></span>
							<span><a href="##">7天无理由退换</a></span>
						</li>
						<li>
							<h5>服务保障</h5>
							<span><a href="##">品牌授权正品</a></span>
							<span><a href="##">品牌客服</a></span>
							<span><a href="##">预约到店体验</a></span>
							<span><a href="##">7天无理由退换</a></span>
						</li>
						<li>
							<h5>第五大道APP</h5>
							<img src="../img/qr.jpg"/>
						</li>
						<li>
							<h5>第五大道微信</h5>
							<img src="../img/weixin_img.png"/>
						</li>
					</ul>
				</div>
				<div class="footer">
					<div class="footer-top">
						<a href= "##">箱包</a>|
						<a href= "##">箱包</a>|
						<a href= "##">箱包</a>|
						<a href= "##">箱包</a>|
						<a href= "##">箱包</a>|
						<a href= "##">箱包</a>|
						<a href= "##">箱包</a>|
						<a href= "##">箱包</a>						
					</div>
					<div class="footer-middle">
						<a href= "##">关于五大道</a>|
						<a href= "##">网站地图</a>|
						<a href= "##">品牌合作专区</a>|
						<a href= "##">媒体聚焦</a>|
						<a href= "##">商务合作</a>|
						<a href= "##">商家合作</a>|
						<a href= "##">加入第五大道</a>|
						<a href= "##">友情链接</a>|	
						<a href= "##">奢尚志</a>|
						<a href= "##">联系我们</a>|
						<a href= "##">投诉建议</a>	
						<p>Copyright © 2008-2016 瑞美嘉信国际信息技术（北京）有限公司&nbsp; 版权所有京ICP备09012701号-1
                       京公网安备110105007400号 食品经营许可证号：
                    </p>
					</div>
					<div class="footer-vic">
						<img src="../img/footer_message10.jpg" />
						<img src="../img/footer_message11.jpg" />
						<img src="../img/footer_message10.jpg" />
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
